# Interactive Activities — Execution Plan Systematize the Matching process across all 8 formats: one shared style foundation, per-activity prototypes, grade-level theming, and a repeatable handoff. > **Status (current):** Phase 0 (foundation) and the build phase are **done** — all 8 activities are built on the shared foundation. Two things evolved from the original plan below and are corrected throughout: (1) there is **no `core.js`** — each activity is a self-contained file with its own JS (the trade we accepted to keep the finalized Matching design intact); `global.css` is the single shared file (tokens + component styles). (2) Grade theming recolors **only the top bar** (each grade's Main color); the dotted background and everything else stay shared. Also note: three formats (Dice Roller, Multiple Choice, Flashcards) were already redesigned on the platform and were re-skinned to the Matching standard. **Framing: the handoff ≈ production.** Engineering is not componentizing anything — the agreed deliverable is vanilla HTML/CSS/JS files. So this project structure *is* the shipping structure, and these files are close to what goes live. Build to production fidelity, not prototype fidelity: keep the real data fetch, real states, and real behavior; only the few things that need engineering's systems stay as placeholders (see below). ## Project structure (as built) ``` Interactive Activities 2026/ ← project folder global.css ← the ONE shared file: tokens + component styles activities/ matching/index.html ← each links ../../global.css and holds only sorting/index.html its activity-specific CSS + its own JS q-and-a/index.html spinner/index.html dice-roller/index.html fill-in-the-blanks/index.html multiple-choice/index.html flashcards/index.html assets/ shared/ ← logos, icons, celebration art matching/ ← per-activity illustrator assets (added as art arrives) docs/ ← Execution Plan, Phase 1 Recon, colors-and-buttons, Matching brief README.md ``` Each `activities/*/index.html` links `../../global.css` and contains **only what's unique**: its cards, its mechanic, and its own JS. ## The shared foundation **`global.css` — the single shared file.** Holds the design **tokens** (colors, spacing, type, radius, shadows, buttons, grade palettes — edit here to rebrand) *and* the shared **component styles** (buttons, start/end modals, top bar, toolbar, toast, states) plus the three grade themes. Cards are NOT here — they're unique per activity. **Shared logic lives inline in each activity (no `core.js`).** The data fetch, start/end + completion modals, correction modes (reveal-at-end vs. as-you-go), TTS, parent `postMessage`, loading/error states, the Review Goals/Concepts button, and the grade switch are implemented in each activity's own `